<template>
  <ContentLayout>
    <el-row>下拉列表选择</el-row>
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
    </el-select>
    <el-row class="top">下拉表格选择</el-row>
    <!-- 单选用法 -->
    <EvDropSelect
      v-model="departmentId"
      :props="props"
      :tabularData="departments"
      :table-width="600"
      @change="change()"
    >
      <el-table-column prop="title" label="名称"></el-table-column>
      <el-table-column prop="code" label="编号" width="180"></el-table-column>
    </EvDropSelect>
    <!-- 多选用法 -->
    <EvDropSelect
      v-model="departmentIds"
      :table-width="700"
      :tabularData="departments"
      multiple
      :props="props"
      @change="change"
    >
      <template #header="{ form, submit }">
        <el-form :inline="true" :model="form">
          <el-form-item label="名称">
            <el-input v-model="searchForm.title" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="searchForm.code" placeholder="请输入编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="title" label="名称" width="180"></el-table-column>
      <el-table-column prop="code" label="编号" width="180"></el-table-column>
    </EvDropSelect>
    <!-- 单选用法 -->
    <el-row class="top">下拉树单选择</el-row>
    <EvDropTree size="small" :data="menuFolder" :expandClickNode="true" clearable checkStrictly @getValue="setTreeMenu"></EvDropTree>
    <!-- 单选用法 -->
    <el-row class="top">下拉树多选择</el-row>
    <EvDropTree size="small" multiple :data="menuFolder" clearable checkStrictly @getValue="setTreeMenu"></EvDropTree>

    <div style="height: 30px;"></div>
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </ContentLayout>
</template>
<script>
import ContentLayout from "@/layout/contentLayout.vue";

export default {
  components: {
    ContentLayout,
  },
  data() {
    return {
      activeName: 'second',
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      params: {
        name: "",
      },
      value: "",
      props: {
        label: "title",
        value: "code",
        key: "id",
      },
      searchForm: {},
      departmentId: "",
      departmentIds: "",
      departments: null,
      menuFolder: [
        {
          id:1,
          label: "一级 1",
          children: [
            {
              id:10,
              label: "二级 1-1",
              children: [
                {
                  id: 100,
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          id:2,
          label: "一级 2",
          children: [
            {
              id:20,
              label: "二级 2-1",
              children: [
                {
                  id: 200,
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              id:21,
              label: "二级 2-2",
              children: [
                {
                  id: 210,
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          id:3,
          label: "一级 3",
          children: [
            {
              id:30,
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              id:31,
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getTreeItems();
  },
  methods: {
    change(e) {
      console.log(e);
    },
    setTreeMenu(key, data) {
      //获取子组件值
      console.log(key);
      console.log(data);
    },
    // 获取组织架构
    getTreeItems() {
      this.$server()
        .query("function-user", "Department", null, null, null)
        .then((response) => {
          this.departments = response.list;
        })
        .catch((response) => {
          this.$notify(response.data.message, "error");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin-top: 20px;
  margin-bottom: 8px;
}
</style>
